<template>
	<view class="body">
		<view class="returnBox">
			<return-text></return-text>
		</view>
		<block v-if="initState">
			<!-- 加载中 -->
			<view v-show="requestState && !pagingState" class="serachLoading">
				<van-loading size="24px">加载中...</van-loading>
			</view>
		</block>
		<block v-else>
			<view class="userInfoBox">
				<user-item :type="1" :userObj="userObj" @changeUserFansState="changeUserFansStateHandle()"></user-item>
			</view>
			<view class="userInfoSignature">{{userObj.signature}}</view>
			
			<view class="userGoodsBox">
				<scroll-view scroll-x enhanced enable-flex :show-scrollbar="false" lower-threshold="300"
					@scrolltolower="groundingHandle" class="userGoodsScroll">
					<view class="userGoodsItemBox" v-for="item in goodsList" :key="item.intactGoodsId">
						<goods-item :goodsObj="item" type="2"></goods-item>
					</view>
					<view class="noGoods" v-if="goodsList.length === 0 && !requestState">
						<van-empty description="该用户没有发布物品"></van-empty>
					</view>
				</scroll-view>
			</view>
			
			<view class="userCommunityBox">
				<view class="userCoummunityItemBox" v-for="item in communityList" :key="item.intactArticleId">
					<public-comment :commentObject="item" :backgroundType="1"></public-comment>
				</view>
				<scroll-loading :requestState="requestState" :pagingState="pagingState" :dataList="communityList"
					:pageNumber="communityPageNumber" :totalPageNumber="communityTotalPageNumber" :search="false"
					text="该用户没有发布文章"/>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 所传递过来的用户id
				userId: '',
				// 用户信息
				userObj: {

				},
				// 是否刚进来
				initState: true,

				// 请求节流阀
				requestState: false,
				// 分页加载状态
				pagingState: false,

				// 社区当前请求的页数
				communityPageNumber: 1,
				// 社区总分页数
				communityTotalPageNumber: 0,
				// 社区列表
				communityList: [],

				// 物品列表
				goodsList: [],
				// 物品当前请求的页数
				goodsPageNumber: 1,
				// 物品总分页数
				goodsTotalPageNumber: 0,
			};
		},
		onLoad(event) {
			this.userId = event.id
			this.getUserInfo()
			this.getMyCommunityList()
			this.getMyGoodsList()
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				this.requestState = true
				const {
					data: result
				} = await uni.$http.get(`/ym_server/user/full/${this.userId}`, {
					loadingState: false
				})
				if (result.code === 200) {
					this.userObj = result.data.user
				} else {
					this.userObj = {}
				}
				setTimeout(() => {
					this.requestState = false
					this.initState = false
				},300)
			},
			// 获取社区数据
			async getMyCommunityList(timeOutState = true) {
				this.requestState = true
				const {
					data: result
				} = await uni.$http.get(
					`/ym_server/user/oneselfArticle/${this.userId}?page=${this.communityPageNumber}`, {
						loadingState: false
					})
				if (result.code === 200 && result.data.list) {
					this.communityTotalPageNumber = result.data.list.totalPage
					this.communityList = [...this.communityList, ...result.data.list.list]
				} else {
					this.communityTotalPageNumber = 0
					this.communityList = []
				}
				if (timeOutState) {
					setTimeout(() => {
						this.requestState = false
						this.pagingState = false
					}, 500)
				} else {
					this.requestState = false
					this.pagingState = false
				}
			},
			// 获取物品数据
			async getMyGoodsList(timeOutState = true) {
				this.requestState = true
				const {
					data: result
				} = await uni.$http.get(`/ym_server/user/oneselfGoods/${this.userId}?page=${this.goodsPageNumber}`, {
					loadingState: false
				})
				if (result.code === 200) {
					this.goodsTotalPageNumber = result.data.list.pages
					this.goodsList = [...this.goodsList, ...result.data.list.list]
				} else {
					this.goodsTotalPageNumber = 0
					this.goodsList = []
				}
				if (timeOutState) {
					setTimeout(() => {
						this.requestState = false
						this.pagingState = false
					}, 500)
				} else {
					this.requestState = false
					this.pagingState = false
				}
			},
			// 文章分页
			onReachBottom() { //滚动到底部的时候触发
				if (this.requestState) return
				if (this.communityPageNumber < this.communityTotalPageNumber) {
					this.pagingState = true
					this.communityPageNumber++
					this.getMyCommunityList(false)
				}
			},
			// 物品分页
			groundingHandle() {
				if (this.requestState) return
				if (this.goodsPageNumber < this.goodsTotalPageNumber) {
					this.goodsPageNumber++
					this.getMyGoodsList(false)
				}
			},
			// 关注取关回调
			changeUserFansStateHandle(id,fansState){
				this.userObj.fansState = !fansState
				const data = {
					id,fansState
				}
				this.$pubsub.publish('userInfoAmendFansState',data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100%;
		min-height: 100vh;
		background: #ffffff;
	}

	.returnBox {
		width: 100%;
		position: sticky;
		top: 0px;
		left: 0px;
		padding-bottom: 10px;
		z-index: 999;
		background-color: #ffffff;
	}

	.userInfoBox {
		width: 670upx;
		margin: 5px auto 0px;
	}

	.userInfoSignature {
		width: 670upx;
		color: #7A7A7A;
		font-size: 24upx;
		margin: 10px auto 20px;
	}

	.userGoodsBox {
		width: 670upx;
		box-sizing: border-box;
		margin: auto;
		padding: 18px 0px;
		border-top: 1px solid #3FD3D1;
		border-bottom: 1px solid #3FD3D1;

		.userGoodsScroll {
			width: 100%;
			display: flex;
			height: 255px;

			.userGoodsItemBox {
				margin-right: 32upx;
				height: 255px;

				&:last-child {
					margin-right: 0upx;
				}
			}
		}
	}

	.userCommunityBox {
		width: 696upx;
		margin: auto;
		padding: 20px 0px 0px;
	}

	.communityBox {
		margin: 28px auto 0px;
		width: 696upx;
	}

	.noGoods {
		width: 100%;
		line-height: 255px;
		text-align: center;
		color: #AEAEAE;
	}

	.serachLoading {
		width: 100%;
		text-align: center;
		line-height: 255px;
		color: #AEAEAE;
	}
</style>
